import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flutter_scan_tool/bloc/tool/tool_bloc.dart';
import 'package:flutter_scan_tool/bloc/tool/tool_state.dart';
import 'package:flutter_scan_tool/models/app_theme.dart';
import 'package:flutter_scan_tool/page/contest_tab_header.dart';
import 'package:flutter_svg/flutter_svg.dart';

import 'search_diag.dart';
import 'tool_info_list.dart';

class ToolInfoPage extends StatefulWidget {
  const ToolInfoPage({Key? key}) : super(key: key);

  @override
  State<ToolInfoPage> createState() => _ToolInfoPageState();
}

class _ToolInfoPageState extends State<ToolInfoPage> with TickerProviderStateMixin {

  AnimationController? animationController;
  final ScrollController _scrollController = ScrollController();

  @override
  void initState() {
    animationController = AnimationController(
        duration: const Duration(milliseconds: 1000), vsync: this);
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      extendBody: true,
      resizeToAvoidBottomInset: false,
      backgroundColor: AppTheme.appTheme.containerBackgroundColor(),
      appBar: AppBar(
        elevation: 0,
        centerTitle: true,
        title: const Text("工具列表"),
        leading: IconButton(
          icon: SvgPicture.asset('image/back.svg'),
          key: GlobalKey(),
          onPressed: () {
            Navigator.of(context).pop();
          },
        ),
      ),
      body: body(),
    );
  }

    Widget body() {
      return SafeArea(
        bottom: false,
        child: Stack(
          children: [
            InkWell(
              splashColor: Colors.transparent,
              focusColor: Colors.transparent,
              highlightColor: Colors.transparent,
              hoverColor: Colors.transparent,
              onTap: () {
                FocusScope.of(context).requestFocus(FocusNode());
              },
              child: Column(children: [
                Expanded(
                  child: NestedScrollView(
                    controller: _scrollController,
                    headerSliverBuilder:
                        (BuildContext context, bool innerBoxIsScrolled) {
                      return <Widget>[
                        SliverList(
                          delegate: SliverChildBuilderDelegate(
                                  (BuildContext context, int index) {
                                return getToolSumUI(context);
                              }, childCount: 1),
                        ),
                        SliverPersistentHeader(
                          pinned: true,
                          floating: true,
                          delegate: ContestTabHeader(
                            getFilterBarUI(context),
                          ),
                        ),
                      ];
                    },
                    body: BlocBuilder<ToolBloc, ToolState>(builder: (_, state) {
                      if (state is ToolLoadProgress) {
                        return const Center(
                          child: CircularProgressIndicator(),
                        );
                      } else if (state is ToolLoadSuccess) {
                        if (state.toolList.isEmpty) {
                          return Center(
                              child: Text(
                                '暂无数据',
                                style: AppTheme.appTheme
                                    .textStyle(textColor: Colors.black45),
                              ));
                        } else {
                          return ToolInfoListView(
                              toolList: state.toolList,
                              animationController: animationController);
                        }
                      } else {
                        return const Center(
                          child: Text('加载失败',
                              style: TextStyle(
                                  fontFamily: 'Montserrat',
                                  fontSize: 20,
                                  fontWeight: FontWeight.w400)),
                        );
                      }
                    }),
                    // BlocListener<ToolBloc, ToolState>(
                    //   listener: (context, state) {},
                    //   child:
                  ),
                ),
                // ),
              ]),
            )
          ],
        ),
      );
    }

  Widget getFilterBarUI(BuildContext context) {
    return Stack(
      children: [
        Positioned(
          top: 0,
          left: 0,
          right: 0,
          child: Container(
            height: 24,
            decoration: BoxDecoration(
                color: AppTheme.appTheme.containerBackgroundColor(),
                boxShadow: <BoxShadow>[
                  BoxShadow(
                      color: Colors.grey.withOpacity(0.2),
                      offset: const Offset(0, -2),
                      blurRadius: 8.0)
                ]),
          ),
        ),
        Container(
          color: AppTheme.appTheme.containerBackgroundColor(),
          child: Padding(
            padding:
            const EdgeInsets.only(left: 16, right: 16, top: 8, bottom: 4),
            child: Row(
              children: [
                Expanded(
                  child: Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: BlocBuilder<ToolBloc, ToolState>(
                      builder: (context, state) {
                        int count = 0;
                        if (state is ToolLoadSuccess) {
                          count = state.toolList.length;
                        }
                        return Text('找到$count件工具',
                          style: const TextStyle(
                              fontSize: 18,
                              fontWeight: FontWeight.w200,
                              fontFamily: 'times'
                          ),
                        );
                      },
                    ),
                  ),
                ),
                Material(
                  color: Colors.transparent,
                  child: InkWell(
                    focusColor: Colors.transparent,
                    highlightColor: Colors.transparent,
                    hoverColor: Colors.transparent,
                    splashColor: Colors.grey.withOpacity(0.2),
                    borderRadius: const BorderRadius.all(
                      Radius.circular(4.0),
                    ),
                    onTap: () {
                      FocusScope.of(context).requestFocus(FocusNode());
                      showSearchPage(context);
                    },
                    child: Padding(
                      padding: const EdgeInsets.only(left: 8),
                      child: Row(
                        children: const [
                          Text(
                            '筛选',
                            style: TextStyle(
                              fontWeight: FontWeight.w100,
                              fontSize: 16,
                              fontFamily: 'times',
                            ),
                          ),
                          Padding(
                            padding: EdgeInsets.all(8.0),
                            child: Icon(
                              Icons.sort,
                              color: AppTheme.iconColor,
                            ),
                          )
                        ],
                      ),
                    ),
                  ),
                )
              ],
            ),
          ),
        ),
      ],
    );
  }

  Widget getToolSumUI(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.only(left: 18),
      child: Row(
        children: [
          Expanded(
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Material(
                  color: Colors.transparent,
                  child: InkWell(
                    focusColor: Colors.transparent,
                    highlightColor: Colors.transparent,
                    hoverColor: Colors.transparent,
                    splashColor: Colors.grey.withOpacity(0.2),
                    borderRadius: const BorderRadius.all(
                      Radius.circular(4.0),
                    ),
                    onTap: () {
                      FocusScope.of(context).requestFocus(FocusNode());
                    },
                    child: Padding(
                      padding: const EdgeInsets.only(
                          left: 4, right: 8, top: 16, bottom: 4),
                      child: Center(
                        widthFactor: 1.5,
                        child: Column(
                          children: [
                            BlocBuilder<ToolBloc, ToolState>(
                              builder: (context, state) {
                                if (state is ToolLoadSuccess) {
                                  int storageIn = state.toolList
                                      .where((element) => element.state == 0)
                                      .length;
                                  return Text(
                                    '$storageIn',
                                    style: AppTheme.appTheme
                                        .numHeadline1(fontSize: 18),
                                  );
                                } else if (state is ToolLoadProgress) {
                                  return const CircularProgressIndicator();
                                } else {
                                  return Text(
                                    '加载错误',
                                    style: AppTheme.appTheme
                                        .numHeadline1(fontSize: 18),
                                  );
                                }
                              },
                            ),
                            const SizedBox(
                              height: 8.0,
                            ),
                            Text(
                              '工具柜内数量',
                              style: AppTheme.appTheme.headline2(fontSize: 15),
                            ),
                            const SizedBox(
                              height: 16.0,
                            ),
                          ],
                        ),
                      ),
                    ),
                  ),
                )
              ],
            ),
          ),
          Padding(
            padding: const EdgeInsets.only(right: 8),
            child: Container(
                width: 1, height: 70, color: Colors.grey.withOpacity(0.8)),
          ),
          Expanded(
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Material(
                  color: Colors.transparent,
                  child: InkWell(
                    focusColor: Colors.transparent,
                    highlightColor: Colors.transparent,
                    hoverColor: Colors.transparent,
                    splashColor: Colors.grey.withOpacity(0.2),
                    borderRadius: const BorderRadius.all(
                      Radius.circular(4.0),
                    ),
                    onTap: () {
                      FocusScope.of(context).requestFocus(FocusNode());
                    },
                    child: Padding(
                        padding: const EdgeInsets.only(
                            left: 8, right: 8, top: 16, bottom: 4),
                        child: Center(
                          child: Column(
                            mainAxisAlignment: MainAxisAlignment.center,
                            crossAxisAlignment: CrossAxisAlignment.center,
                            children: [
                              BlocBuilder<ToolBloc, ToolState>(
                                  builder: (context, state) {
                                    if (state is ToolLoadSuccess) {
                                      int storageInNum = state.toolList
                                          .where((element) => element.state > 0)
                                          .length;
                                      return Text(
                                        '$storageInNum',
                                        style: AppTheme.appTheme
                                            .numHeadline1(fontSize: 18),
                                      );
                                    } else if (state is ToolLoadProgress) {
                                      return const CircularProgressIndicator();
                                    } else {
                                      return Text('加载失败',
                                        style: AppTheme.appTheme.numHeadline1(
                                            fontSize: 18),
                                      );
                                    }
                                  }),
                              const SizedBox(
                                height: 8,
                              ),
                              Text(
                                '工具柜出库数量',
                                style:
                                AppTheme.appTheme.headline2(fontSize: 15),
                              ),
                              const SizedBox(
                                height: 16.0,
                              ),
                            ],
                          ),
                        )),
                  ),
                )
              ],
            ),
          )
        ],
      ),
      // ),
    );
  }
  void showSearchPage(BuildContext context) async {
    await showDialog(
        context: context,
        builder: (_) {
          return const SearchDiag();
        });
  }
  }
